<template>
	<view class="content">
		<uni-nav-bar fixed left-icon="back" :title="title"></uni-nav-bar>
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.contactName" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.contactPhone" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<input class="input" type="text" v-model="addressData.address" placeholder="省市区详细地址" placeholder-class="placeholder" />
			<!--<text @click="chooseLocation" class="input">
				{{addressData.addressName}}
			</text>-->
			<!--<text class="yticon icon-shouhuodizhi"></text>-->
			<!--<uni-icons type="location-filled" size="40" color="#999"></uni-icons>-->
		</view>
		<!--<view class="row b-b">
			<text class="tit">门牌号</text>
			<input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>-->
		
		<view class="row default-row" v-if="manageType != 'add'">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.isDefault" color="#6CB041" @change="switchChange" />
		</view>
		<button v-if="manageType == 'add'" class="add-btn" @click="confirm">提交</button>
		<button v-else class="add-btn" @click="confirmEdit">修改</button>
	</view>
</template>

<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
	const switchFilter = { 0: false, 1: true }
	export default {
		components: {uniIcons},
		filters: {

		},
		data() {
			return {
				addressData: {
                    contactName: '',
                    contactPhone: '',
                    address: '',
                    isDefault: false
				},
                title: '新增收货地址',
                manageType: 'add'
			}
		},
		onLoad(option){
			if(option.type==='edit'){
				this.title = '编辑收货地址'
				this.addressData = JSON.parse(option.data)
                this.addressData.isDefault = switchFilter[this.addressData.isDefault]
			}
			this.manageType = option.type;
		},
		methods: {
			switchChange(e){
				this.addressData.isDefault = e.detail.value;
			},
			
			//地图选择地址
			chooseLocation(){
				uni.chooseLocation({
					success: (data)=> {
						this.addressData.addressName = data.name;
						this.addressData.address = data.name;
					}
				})
			},
			
			//提交
			confirm(){
				let data = this.addressData;
				if(!data.contactName){
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.contactPhone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!data.address){
					this.$api.msg('请填写地址');
					return;
				}
				if (data.isDefault) {
                    data.isDefault = 1
				} else {
                    data.isDefault = 0
				}
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				/*this.$api.prePage().refreshList(data, this.manageType);*/
                uni.showLoading({title: ''})
				this.$api.api('ship.add',data).then(res => {
                    uni.hideLoading();
					if (res.code == 200) {
                        uni.navigateBack({delta:1,
                            success: function() {
                                this.$api.prePage().$vm.refreshList(data, this.manageType); // 执行前一个页面的刷新
                            }})
                        this.$api.msg('地址添加成功')
                        uni.navigateBack({delta:1})
					} else {
						this.$api.msg(res.message)
					}
				})
			},
            confirmEdit(){
                if (this.addressData.isDefault) {
                    this.addressData.isDefault = 1
                } else {
                    this.addressData.isDefault = 0
                }
                uni.showLoading({title: ''})
                this.$api.api('ship.edit', this.addressData).then(res => {
                    if (res.code == 200) {
                        uni.navigateBack({delta:1,
                            success: function() {
                                this.$api.prePage().$vm.refreshList(data, this.manageType); // 执行前一个页面的刷新
                        }})
                        this.$api.msg('修改成功')
                        uni.navigateBack({delta:1})
                        uni.hideLoading();
                    } else {
                        uni.hideLoading();
                        this.$api.msg(res.message)
                    }
                })
            }
		}
	}
</script>

<style lang="scss">
	$page-color-base: #f8f8f8;
	$font-color-dark: #303133;
	$font-color-light: #909399;
	$font-lg: 32upx;
	$base-color: #6CB041;
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		border-bottom: 2rpx solid #eee;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px #6CB041;
	}
</style>
